<template>
  <div>
    <div>
      <el-form :inline="true" class="demo-form-inline">
        <!--      模糊-->
        <el-form-item >

          月份： <el-select   v-model="search"
                          size="mini"
                          style="width: 200px">
          <el-option  v-for="item in address"
                      :key="item.month"
                      :value="item.month"
                      :label="item.month"></el-option>
        </el-select>

          楼栋：<el-select v-model="search2"
                          size="mini"
                          style="width: 200px">
          <el-option  v-for="item in address"
                      :key="item.aname"
                      :value="item.aname"
                      :label="item.aname"></el-option>                          >

        </el-select>

        </el-form-item>

        <el-button type="primary" icon="el-icon-search" @click="onSearch()">搜索</el-button>


      </el-form>
      <el-row  style="margin-left: 20%;float: left">
        <el-button type="success" @click="dialogVisible = true" size="mini" round><i class="el-icon-upload"/>导入</el-button>
        <el-button type="success"  @click="deleteFileOrDirectory(sels)" size="mini" round><i class="el-icon-share"/>导出</el-button>
        <el-button type="success"  size="mini" round><i class="el-icon-date"/>生成模板</el-button>
        <el-button type="success"  size="mini" round><i class="el-icon-paperclip"/>数据提交</el-button>
      </el-row>
      <!--    查询-->
    <!--  <div style="color: rebeccapurple" align="left">

        <el-button   type="success" @click="dialogVisible = true" icon="el-icon-circle-plus-outline">添加</el-button>
        <el-button   type="success"  @click="handleEdit(sels)" icon="el-icon-edit">编辑</el-button>
        <el-button   type="success"  @click="deleteFileOrDirectory(sels)" icon="el-icon-remove">删除</el-button>
      </div>-->
      <el-table :data="users.slice((currentPage-1)*pagesize,currentPage*pagesize)"@selection-change="selsChange">
        <el-table-column label="序号" prop="id"/>
        <el-table-column
          type="selection"
          width="55" >
        </el-table-column>


        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="月份" prop="month"/>
        <el-table-column label="楼栋" prop="aname"/>
        <el-table-column label="用电度数（度）" prop="ydds"/>
        <el-table-column label="单价（元）" prop="dj"/>
        <el-table-column label="应激电费（度）" prop="yjdf"/>
      </el-table>

      <!--添加页面-->
      <el-dialog
        title="写字楼用电管理"
        :visible.sync="dialogVisible"
        append-to-body
        :before-close="handleClose">

        <el-form   :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline="true">
          <!--        <el-form-item label="客户订单编号" prop="id">-->
          <!--          <el-input v-model="formInline.id" style="width: 300px"></el-input>-->
          <!--        </el-form-item>-->
          <!--      </el-form-item>-->
          <el-form-item label="月份" prop="month">
            <el-select   v-model="address.month"
                         style="width: 150px" >
              <el-option  v-for="item in address"
                          :key="item.id"
                          :value="item.id"
                          :label="item.month"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="楼栋" prop="aname">
            <el-select   v-model="address.aname"
                         style="width: 150px">
              <el-option  v-for="item in address"
                          :key="item.id"
                          :value="item.id"
                          :label="item.aname"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用电度数（度）" prop="ydds">
            <el-input v-model="ruleForm.ydds" style="width: 150px"></el-input>
          </el-form-item>
          <el-form-item label="单价（元）" prop="dj">
            <el-input v-model="ruleForm.dj" style="width: 150px"></el-input>
          </el-form-item>
          <el-form-item label="应激电费（元）" prop="yjdf">
            <el-input v-model="ruleForm.yjdf" style="width: 150px"></el-input>
          </el-form-item>
          <br>
          <el-form-item label="备注" >
            <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="textarea"
              style="width: 410px"    >
            </el-input>
          </el-form-item><br>

        </el-form>
        <el-button round @click="cancel()" style="width: 150px;margin-left: 20px"   ><el-image src="" style="width: 20px"></el-image> 取 消</el-button>
        <el-button round @click="addUser()" type="primary" style="width: 150px"> <el-image src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1954671725,2900034259&fm=26&gp=0.jpg" style="width: 20px"></el-image>确定</el-button>

        <span slot="footer" class="dialog-footer">

            <span slot="footer" class="dialog-footer">

            </span>
    </span>
      </el-dialog>
      <!--修改页面-->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm" size="medium">
        <el-dialog
          title="编辑"
          :append-to-body='true'
          :visible.sync="dialogUpdate"

        >
          <el-form   :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline="true">
            <!--        <el-form-item label="客户订单编号" prop="id">-->
            <!--          <el-input v-model="formInline.id" style="width: 300px"></el-input>-->
            <!--        </el-form-item>-->
            <!--      </el-form-item>-->
            <el-form-item label="月份" prop="did">
              <el-select  v-model="ruleForm.month" style="width: 150px">
                <el-option v-for="item in address" :key="item.did" :label="item.month" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="楼栋" prop="did">
              <el-select   v-model="ruleForm.aname"
                           style="width: 150px">
                <el-option  v-for="item in address"
                            :key="item.did"
                            :value="item.id"
                            :label="item.aname"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="用电度数（度）" prop="ydds">
              <el-input v-model="ruleForm.ydds" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="单价（元）" prop="dj">
              <el-input v-model="ruleForm.dj" style="width: 150px"></el-input>
            </el-form-item>
            <el-form-item label="应激电费（元）" prop="yjdf">
              <el-input v-model="ruleForm.yjdf" style="width: 150px"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
     <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()" size="medium">取 消</el-button>
            <el-button @click="updateUser()" type="primary" size="medium">确 定</el-button>
          </span>
          </span>
        </el-dialog>
      </el-form>
      <br>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[3, 6, 9, 12]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>


  export default {
    name: "shangpu",
    inject: ['reload'],
    data() {
      return {
        textarea: '',
        address:{id:'',month:'',aname:''},
        louceng:{cid:'',loudeng:''},
        fanghao:{fid:'',fanghao:''},
        sels: [],
        users: [],
        depatment:'',
        depss:[],
        search1: '',
        search2: '',
        search: '',
        dialogVisible: false,
        dialogUpdate: false,
        schArr: [], // 分页数据源
        pagesize: 3,
        currentPage: 1,
        total: 0,

        disablePage: false,
        ruleForm: {
          schArr: [],
          tableData: [],
          search: '',
          dialogVisible: false,
          dialogUpdate: false,
          pageSize: 3,
          currentPage: 1,
          total: 0,
          disablePage: false
        },

        page: {
          id: '',
          ydds: '',
          dj: '',
          yjdf: '',
          did: '',

        },

        formInline: {
          id: '',
          ydds: '',
          dj: '',
          yjdf: '',
          did: '',

        },
      }
    },
    created () {
      const that = this;
      this.getPages();
      this.axios.post('http://localhost:8083/dft/select')
        .then(function (response) {
          console.log(response);
          that.users = response.data;
        })
      this.axios.post('http://localhost:8083/address/select')
        .then(function (response) {
          console.log(response);
          that.address = response.data;
        })


    },
    watch: {
      // watch就是用来监控数据变化，只有变化了才会调用定时器的变化
      search () {
        // 调用定时器

        this.timer()
      },
      search2() {
        // 调用定时器

        this.timer()
      },
      search3 () {
        // 调用定时器

        this.timer()
      }
    },
// 页面销毁后 停止计时器
    destroyed () {
      clearTimeout(this.timer)
    },
    mounted() {
      this.getDep();
    },
    function2(val) {
      console.log(val)  // 此时打印的直接就是id
    },
    methods: {
      function2(val) {
        console.log(val)  // 此时打印的直接就是id
      },

      handleSizeChange(val) {
        this.getPageData();
        var s = this
        console.log(`每页 ${val} 条`);
        s.pagesize = val;
        s.getPageData();
        console.log(s.pagesize);
      },
      handleCurrentChange(val) {
        this.getPageData();
        var ss = this
        console.log(`当前页: ${val}`);
        ss.currentPage = val;
        ss.getPageData();
        console.log(ss.currentPage);
      },
      getPageData() {
        console.log("是否yes");
        var that = this
        let start = (this.currentPage - 1) * this.pagesize;
        let end = start + this.pagesize;
        this.schArr = that.users.slice(start, end);
        this.total = that.users.length;
      },

      selsChange(sels) {
        this.sels = sels
      },
      deleteFileOrDirectory() {
        var ids = this.sels.map(item => item.id).join()//获取所有选中行的id组成的字符串，以逗号分隔
        console.log(ids);
        this.$confirm('此操作将永久删除该文件及其子文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'

        }).then(() => {
            this.axios.post('http://localhost:8083/dft/deleteAll?ids=' + ids);
            location.reload();
            console.log("删除成功")
          }
        )
      },
      handleEdit(index, row) {
        this.dialogUpdate = true;
        this.ruleForm = Object.assign({}, row); //这句是关键！！！
      },
      // handleClose(done) {
      //     this.$confirm('确认关闭？')
      //         .then(  => {
      //             done();
      //         })
      //         .catch(_ => {});
      // },

      cancel() {
        this.dialogUpdate = false;
        this.dialogVisible = false;
        this.emptyUserData();
      },
      emptyUserData(){
        this.ruleForm = {
          id: this.ruleForm.id,
          ydds: this.ruleForm.ydds,
          dj: this.ruleForm.dj,
          yjdf: this.ruleForm.yjdf,
          did:this.address.month,


        }
      },
      addUser() {
        // alert(this,loucen)
        let postData = this.qs.stringify({
          id: this.ruleForm.id,
          ydds: this.ruleForm.ydds,
          dj: this.ruleForm.dj,
          yjdf: this.ruleForm.yjdf,
          did:this.address.month,

        });
        this.axios({
          method: 'post',
          url:'http://localhost:8083/dft/add',
          data:postData
        }).then(response =>
        {
          this.axios.post('').then(response =>
          {
            this.tableData = response.data;
            this.currentPage = 1;
            this.reload()
            this.$message({
              type: 'success',
              message: '已添加!'
            });
          }).catch(error =>
          {
            console.log(error);
            location.reload()
          });
          this.getPages();
          this.dialogVisible = false
          console.log(response);
        }).catch(error =>
        {
          console.log(error);
          location.reload()
        });
      },
      updateUser() {
        let postData = this.qs.stringify({
          id: this.ruleForm.id,
          ydds: this.ruleForm.ydds,
          dj: this.ruleForm.dj,
          yjdf: this.ruleForm.yjdf,
          did:this.ruleForm.month,

        });
        this.axios({
          method: 'post',
          url:'http://localhost:8083/dft/update',
          data:postData
        }).then(response =>
        {
          this.handleCurrentChange();
          this.cancel();
          this.$message({
            type: 'success',
            message: '更新成功!',
          });
          console.log(response);
          location.reload();
        }).catch(error =>
        {
          this.$message({
            type: 'success',
            message: '更新失败!'
          });
          console.log(error);
          location.reload();

        });
      },
      onSearch() {
        let postData = this.qs.stringify({
          month: this.search,
          aname: this.search2,
        });
        this.axios({
          method: 'post',
          url: 'http://localhost:8083/dft/like',
          data: postData
        }).then(response =>
        {this.axios({
          method: 'post',
          url: 'http://localhost:8083/dft/getCount',
          data: postData
        }).then(response =>
        {
          this.total = response.data;
        })
          this.users = response.data;
          this.disablePage = true;
        }).catch(error =>
        {
          console.log(error);
        });
      },
      getPages() {
        let postData = this.qs.stringify({
          anum: this.search,
          astime: this.search2,
          artime: this.search1,
        });
        this.axios({
          method: 'post',
          url: 'http://localhost:8083/dft/getCount',
          data: postData
        }).then(response =>
        {
          this.total = response.data;
        }).catch(error =>
        {
          console.log(error);
        });
      },
      refreshData() {
        location.reload();
      },
      timer () {
        return setTimeout(() => {
          this.onSearch()
        }, 100)
      },
    },
  }
</script>
<style scoped>
  .search_name{
    width: 200px;
  }.search1_name1{
     width: 200px;
   }.search2_name2{
      width: 200px;
    }
  .page{
    margin: 0px;
    padding: 0px;
    text-align: right;
  }
</style>
